<template>
  <div class="content">
    <div class="content_head">
      <div class="left">
        <h1 class="title">{{ props.data.title }}</h1>
        <div class="particulars">
          <p class="author" @click="DatailPage(props.data.id)">
            {{ props.data.author }} 发布了作品
          </p>
          <p class="time">{{ props.data.time }}</p>
        </div>
      </div>
      <div class="right" v-if="props.userData.role[0] !== 2">移动</div>
    </div>
    <div class="audioCom">
      <img :src="qin" loading="lazy" alt="" class="headAudio" />
      <audio
        class="audio"
        :src="props.data.audio"
        controls
        ref="audioElement"
        @timeupdate="updateSlider"
      ></audio>
      <div>
        <input
          class="duration"
          type="range"
          min="0"
          v-model="value"
          @input="updateBackground"
          :style="sliderStyle"
          :max="maxValue"
        />
      </div>
      <div class="btn">
        <!-- 播放按钮 -->
        <img
          :src="playPauseIcon"
          loading="lazy"
          alt=""
          @click="togglePlay(props.data.audioStatus)"
        />
        <!-- 播放按钮 -->
        <img
          :src="satteo"
          loading="lazy"
          alt=""
          @click="suspend(props.data.audioStatus)"
        />
        <!-- 分享 -->
        <el-popover :visible="visible" placement="bottom" :width="200">
          <template #default>
            <ul>
              <li
                :class="[listId == 2 ? 'active' : 'itemActive']"
                @click="radioChangeId(2)"
                v-if="status == 2 && idName != 2"
              >
                分享到个人公开
              </li>
              <li
                :class="[listId == 0 ? 'active' : 'itemActive']"
                @click="radioChangeId(0)"
              >
                分享到社区
              </li>
              <li
                :class="[listId == 1 ? 'active' : 'itemActive']"
                @click="radioChangeId(1)"
              >
                分享到花园小镇班级一
              </li>
            </ul>
          </template>
          <template #reference>
            <!-- 个人 -->
            <el-button
              class="m-2"
              v-if="
                idName == undefined &&
                props.userData.role[0] != 2 &&
                props.status == 0
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(0)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == undefined &&
                props.userData.role[0] != 2 &&
                props.status == 1
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(1)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == undefined &&
                props.userData.role[0] != 2 &&
                props.status == 2
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(2)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == undefined &&
                props.userData.role[0] == 2 &&
                props.status == 0
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(0)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == undefined &&
                props.userData.role[0] == 2 &&
                props.status == 1
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(1)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == undefined &&
                props.userData.role[0] == 2 &&
                props.status == 2
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(2)"
              />
            </el-button>
            <!-- 班级 -->
            <el-button
              class="m-2"
              v-if="
                idName == '3' &&
                props.userData.role[0] != 2 &&
                (props.status == 3 || props.status == 0)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(3)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == '3' &&
                props.userData.role[0] != 2 &&
                (props.status == 4 || props.status == 1)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(4)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '3' &&
                props.userData.role[0] == 2 &&
                (props.status == 3 || props.status == 0)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(3)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '3' &&
                props.userData.role[0] == 2 &&
                (props.status == 4 || props.status == 1)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(4)"
              />
            </el-button>
            <!-- 老师 -->
            <el-button
              class="m-2"
              v-if="
                idName == '1' &&
                props.userData.role[0] != 2 &&
                (props.status == 3 || props.status == 0)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(3)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == '1' &&
                props.userData.role[0] != 2 &&
                (props.status == 4 || props.status == 1)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(4)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == '1' &&
                props.userData.role[0] != 2 &&
                props.status == 2
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(4)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '1' &&
                props.userData.role[0] == 2 &&
                (props.status == 3 || props.status == 0)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(3)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '1' &&
                props.userData.role[0] == 2 &&
                (props.status == 4 || props.status == 1)
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(4)"
              />
            </el-button>
            <!-- 个人 -->
            <el-button
              class="m-2"
              v-if="
                idName == '2' &&
                props.userData.role[0] != 2 &&
                props.status == 0
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(0)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == '2' &&
                props.userData.role[0]!= 2 &&
                props.status == 1
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(1)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-if="
                idName == '2' &&
                props.userData.role[0] != 2 &&
                props.status == 2
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                class="shareImg"
                @click="sharePlay(2)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '2' &&
                props.userData.role[0] == 2 &&
                props.status == 0
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(0)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '2' &&
                props.userData.role[0] == 2 &&
                props.status == 1
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(1)"
              />
            </el-button>
            <el-button
              class="m-2"
              v-else-if="
                idName == '2' &&
                props.userData.role[0] == 2 &&
                props.status == 2
              "
            >
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(2)"
              />
            </el-button>
            <!--社区-->
            <el-button class="m-2">
              <img
                :src="share"
                loading="lazy"
                alt=""
                @click="studentsharePlay(2)"
              />
            </el-button>
          </template>
        </el-popover>
        <!-- 删除 -->
        <img
          :src="stateccc"
          loading="lazy"
          alt=""
          @click="
            clearTrack(
              props.data.id,
              props.data.userId,
              props.userData.id,
              props.userData.role[0],
              props.data.UserShareId
            )
          "
        />
      </div>
    </div>
    <!-- 点赞和评论 -->
    <div class="LikeComment">
      <div class="like" @click="onLike(props.data.id)">
        <img v-if="likeShow === false" :src="good" loading="lazy" alt="" />
        <img v-else :src="goodRed" loading="lazy" alt="" />
        {{ props.data.like }}
      </div>
      <div class="comment" @click="onComment(props.data.id)">
        <img :src="comment" loading="lazy" alt="" />
        <p>{{ props.data.list.length }}</p>
      </div>
    </div>
    <div v-show="props.data.commentShow" class="commentMain">
      <!-- 添加评论 -->
      <div class="comSend" v-if="props.userData.role[0] !== 2">
        <input
          class="comment_input"
          v-model="inputComment"
          placeholder="请输入评论评论"
          @keyup.enter.native="onSearchIpt"
        />
        <div class="demo-rate-block">
          <el-rate
            v-model="scoring"
            :colors="['#f8e0ab', '#fbe5b1', '#f39d06']"
            size="large"
            @click="onScoring"
          />
        </div>
      </div>
      <div class="comTop">{{ props.data.list.length }}条评论</div>
      <!-- 评论内容 -->
      <ul class="list">
        <li class="item" v-for="child in props.data.list" :key="child.id">
          <div class="item_left">
            <p class="title">{{ child.title }}</p>
            <div class="demo-rate-block">
              <el-rate
                v-model="child.scoring"
                disabled
                :colors="['#f8e0ab', '#fbe5b1', '#f39d06']"
                size="large"
              />
            </div>
            <p class="item_com">{{ child.comment }}</p>
          </div>
          <div
            class="item_right"
            v-if="
              props.userData.role[0] != 2 && child.userId == props.userData.id
            "
          >
            <el-icon @click="onDelItem(child.id)">
              <Close />
            </el-icon>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, handleError } from "vue";
import { setCurrentAudio } from "./audioManager";
import share from "@/assets/img/share.png";
import stateccc from "@/assets/img/stateccc.png";
import stop from "@/assets/img/stop.png";
import state from "@/assets/img/state.png";
import satteo from "@/assets/img/satteo.png";
import qin from "@/assets/img/92.png";
import good from "@/assets/img/good.png";
import goodRed from "@/assets/img/goodRed.png";
import comment from "@/assets/img/comment.png";

const props = defineProps(["data", "commentShow", "status", "userData", "id","path"]);
const emit = defineEmits([
  "onLike",
  "onComment",
  "onSend",
  "onDelItem",
  "clearTrack",
  "changeAudio",
  "suspend",
  "shares",
]);
const idName = ref(props.id != undefined ? props.id.slice(-1) : undefined);
const resName = ref(props.id != undefined ? props.id.slice(0, -1) : undefined);

const path = ref(props.path);
console.log(path.value);
// 点赞
const likeShow = ref(false);
const onLike = (id) => {
  likeShow.value = !likeShow.value;
  // console.log(id);

  if (likeShow.value) {
    emit("onLike", (props.data.like += 1));
  } else {
    emit("onLike", (props.data.like -= 1));
  }
};
// 评论
const ids = ref(null);
const scoring = ref(null);
const onComment = (id) => {
  ids.value = id;
  console.log("ids.value: ", ids.value);
  emit("onComment", id);
};
// 写评论
const inputComment = ref("");
const onSearchIpt = (e) => {
  if (e.keyCode == 13) {
    if (inputComment.value !== "") {
      if (scoring.value) {
        onSendItem();
      } else {
        console.log(inputComment.value + "没有选择星星");
      }
    } else {
      console.log(inputComment.value + "评论内容不能为空");
    }
  }
};
const onScoring = () => {
  if (scoring.value) {
    if (inputComment.value) {
      onSendItem();
    }
  } else {
    console.log(inputComment.value + "没有选择星星");
  }
};
const onSendItem = () => {
  let obj = {
    id: new Date().getTime(),
    userId: props.userData.id,
    title: "赵夏秋",
    scoring: scoring.value,
    comment: inputComment.value,
    pid: ids.value,
  };
  inputComment.value = "";
  scoring.value = null;
  emit("onSend", obj);
};
// 删除评论
const onDelItem = (id) => {
  let delObj = {
    id: id,
    pid: ids.value,
  };
  emit("onDelItem", delObj);
};
// audio
const audioElement = ref(null); // 当前组件中的音频元素
const value = ref(0); // 当前进度
const maxValue = ref(100); // 最大进度
const visible = ref(false); // 分享弹出框显示状态
const listId = ref(null); // 分享列表选项
const currentAudio = ref(null); // 当前播放的音频元素
// 计算属性：更新音频进度条样式
const sliderStyle = computed(() => {
  const percentage = Math.ceil((Math.ceil(value.value) / maxValue.value) * 100);
  return {
    background: `linear-gradient(to right, #a3cf01 ${percentage}%, #e6e6e6 ${percentage}%)`,
  };
});
// 计算属性：根据播放状态返回对应的图标路径
const playPauseIcon = computed(() => {
  // 如果进度条已完成，使用完成图标
  if (value.value >= maxValue.value) {
    return state; // 更换为你希望的完成图标路径
  }
  return props.data.audioStatus ? stop : state;
});
// 更新背景样式
const updateBackground = () => {
  sliderStyle.value = {
    background: `linear-gradient(to right, #a3cf01 ${Math.ceil(
      value.value
    )}%, #e6e6e6 ${Math.ceil(value.value)}%)`,
  };
  if (audioElement.value) {
    const duration = audioElement.value.duration;
    const newTime = (value.value / maxValue.value) * duration;
    audioElement.value.currentTime = newTime;
  }
};
// 更新进度条
const updateSlider = () => {
  if (audioElement.value) {
    const duration = audioElement.value.duration;
    const currentTime = audioElement.value.currentTime;
    value.value = (currentTime / duration) * maxValue.value;
  }
};
// 切换播放/暂停状态
const togglePlay = (data) => {
  if (data && audioElement.value) {
    // 当前音频正在播放，点击后暂停
    audioElement.value.pause();
    currentAudio.value = null;
    emit("changeAudio", {
      id: props.data.id,
      audioStatus: false,
    });
  } else {
    // 处理播放逻辑
    if (currentAudio.value && currentAudio.value !== audioElement.value) {
      currentAudio.value.pause();
      currentAudio.value.currentTime = 0;
    }

    if (audioElement.value) {
      setCurrentAudio(audioElement.value);
      audioElement.value.play();
      currentAudio.value = audioElement.value;
      emit("changeAudio", {
        id: props.data.id,
        audioStatus: true,
      });
    }
  }
};
const suspend = async (data) => {
  if (data && audioElement.value) {
    // 设置进度条的值
    console.log(1111);
    audioElement.value.currentTime = value.value;
    audioElement.value.pause();
    currentAudio.value = null;
    value.value = 0;
    await nextTick();
    updateBackground();
    emit("suspend", {
      id: props.data.id,
      audioStatus: false,
    });
  }
  if (value.value) {
    // 设置进度条的值
    audioElement.value.currentTime = value.value;
    audioElement.value.pause();
    currentAudio.value = null;
    value.value = 0;
    await nextTick();
    updateBackground();
    emit("suspend", {
      id: props.data.id,
      audioStatus: false,
    });
  }
};
// 删除当前音频
const clearTrack = (id, userId, useid, role, shareid) => {
  console.log("作者id: ", userId);
  console.log("用户id: ", useid);
  console.log("权限: ", role);
  console.log("音频id: ", id);
  console.log("分享用户id: ", shareid);
  if (path.value == props.path) {
    console.log("社区页面");
   
    if (useid == shareid) {
        console.log("是本人");
        // 点击删除按钮，删除该条数据
        emit("clearTrack", id);
      } else {
        console.log("不是本人");
      }
  }else if (idName.value == undefined) {
    console.log("个人页面");
    if (props.status == 0) {
      console.log("个人公开");
      
    } else if (props.status == 1) {
      console.log("分享");
      if (useid == userId) {
        console.log("是本人");
        // 点击删除按钮，删除该条数据
        emit("clearTrack", id);
      } else {
        console.log("不是本人");
      }
    } else if (props.status == 2) {
      console.log("编辑");
      if (useid == userId) {
        console.log("是本人");
        // 点击删除按钮，删除该条数据
        emit("clearTrack", id);
      } else {
        console.log("不是本人");
      }
    }
  } else if (idName.value == "3") {
    console.log("3");
    if (role != 2) {
      console.log("不是学生");
      if (props.status == 3 || props.status == 0) {
        console.log(3333);
        if (useid == shareid) {
          console.log("分享和用户一样");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        }
      } else if (props.status == 4) {
        console.log(4444);
        if (useid == shareid) {
          console.log("分享和用户一样");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        }
      }
    } else {
      console.log("111s");
    }
  } else if (idName.value == "1") {
    console.log("1");
    if (role != 2) {
      console.log("不是学生");
      console.log("props.status: ", props.status);
      if (props.status == 0) {
        console.log("00");
        if (useid == userId) {
          console.log("本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      } else if (props.status == 1) {
        console.log("11");
        if (useid == userId) {
          console.log("本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      } else if (props.status == 2) {
        console.log("22");
        if (useid == userId) {
          console.log("本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      }
    }
  } else if (idName.value == "2") {
    console.log("2");
    if (role == 2) {
      if (props.status == 0) {
        console.log("个人公开");
        if (useid == userId) {
          console.log("是本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      } else if (props.status == 1) {
        console.log("分享");
        if (useid == userId) {
          console.log("是本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      } else if (props.status == 2) {
        console.log("编辑");
        if (useid == userId) {
          console.log("是本人");
          // 点击删除按钮，删除该条数据
          emit("clearTrack", id);
        } else {
          console.log("不是本人");
        }
      }
    }
  }
};

// 跳转详情
const DatailPage = (id) => {
  console.log(id);
  const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
  window.open(`${baseUrl}/DetailPage/${id}`, "_blank");
};
// 分享 学生版本
const studentsharePlay = (id) => {
  console.log(111111, id);
  if (id == 0) {
    console.log("你的权限不够");
    return;
  } else if (id == 1) {
    console.log("你的权限不够");
    return;
  } else if (id == 2) {
    console.log("已分享到个人公开");
    return;
  }
};
// 分享 老师版本
const sharePlay = (id) => {
  // 实现分享功能
  console.log(id, "用户id", props.userData.id);
  visible.value = !visible.value;
};

// 分享 老师选择下拉的内容
const radioChangeId = (id) => {
  listId.value = id;
  console.log(listId.value, "用户id", props.userData.id);

  if (listId.value === 0) {
    emit("shares", props.data.id);
  } else if (listId.value === 1) {
    emit("shares", props.data.id);
  }else if(listId.value === 2) {
    console.log("已分享到个人公开")
  }
  visible.value = !visible.value;
};

onMounted(() => {
  if (audioElement.value) {
    audioElement.value.addEventListener("loadedmetadata", () => {
      maxValue.value = audioElement.value.duration;
    });
  }
  document.addEventListener("click", (e) => {
    // console.log(e.target.className);
    if (
      e.target.className != "el-popper" &&
      e.target.className != "active" &&
      e.target.className != "shareImg"
    ) {
      // console.log(1111);
      visible.value = false;
    }
  });
});
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  border: 1px solid #f5f5f5;
  padding: 20px;

  .content_head {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        line-height: 50px;
      }

      .particulars {
        display: flex;
        align-items: flex-end;

        .author {
          color: #8a8a8a;
        }

        .time {
          font-size: 13px;
          margin-left: 20px;
          color: #d0d0d0;
        }
      }
    }

    .right {
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #10cb7e;
      color: white;
    }
  }

  .audioCom {
    width: 705px;
    height: 70px;
    background-color: #f9f9f9;
    border-radius: 50px 15px 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

    .headAudio {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }

    .audio {
      width: 0px;
      height: 0px;
      visibility: hidden;
    }

    .btn {
      display: flex;

      img {
        width: 50px;
        height: 50px;
      }

      .el-button .el-tooltip__trigger .el-tooltip__trigger {
        width: 50px;
        height: 50px;
        visibility: hidden;
      }

      .el-button + .el-button {
        margin-left: 8px;
      }

      .m-2 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .duration {
      box-sizing: border-box;
      -webkit-appearance: none;
      /* 去除默认样式 */
      width: 400px;
      /* 设置宽度 */
      height: 8px;
      /* 设置音轨的高度 */
      background: #e6e6e6;
      // background: #a3cf01;
      /* 青绿色音轨 */
      border-radius: 5px;
      /* 圆角 */
      outline: none;
      /* 去除外轮廓 */
      cursor: pointer;
      /* 指针光标 */
    }

    .duration::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* 去除默认样式 */
      width: 20px;
      /* 设置滑块宽度 */
      height: 20px;
      /* 设置滑块高度 */
      background: #f3be24;
      /* 蓝色滑块 */
      border-radius: 50%;
      /* 圆形滑块 */
      cursor: pointer;
      /* 指针光标 */
      box-shadow: 0 0 5px white;
      /* 滑块阴影 */
      border: 3px solid white;
    }

    .duration::-moz-range-thumb {
      width: 20px;
      /* 设置滑块宽度 */
      height: 20px;
      /* 设置滑块高度 */
      background: #e6e6e6;
      /* 蓝色滑块 */
      border-radius: 50%;
      /* 圆形滑块 */
      cursor: pointer;
      /* 指针光标 */
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
      /* 滑块阴影 */
    }

    .duration::-ms-thumb {
      width: 20px;
      /* 设置滑块宽度 */
      height: 20px;
      /* 设置滑块高度 */
      background: #e6e6e6;
      /* 蓝色滑块 */
      border-radius: 50%;
      /* 圆形滑块 */
      cursor: pointer;
      /* 指针光标 */
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
      /* 滑块阴影 */
    }

    /* IE和Edge浏览器中的轨道样式 */
    .duration::-ms-track {
      background: transparent;
      /* 轨道背景透明 */
      border-color: transparent;
      /* 边框透明 */
      color: transparent;
      /* 字体颜色透明 */
      height: 8px;
      /* 轨道高度 */
      overflow: hidden;
    }

    .duration::-ms-fill-lower {
      background: #e6e6e6;
      /* 青绿色 */
      border-radius: 5px;
      /* 圆角 */
    }

    .duration::-ms-fill-upper {
      background: #e0f7fa;
      /* 青绿色 */
      border-radius: 5px;
      /* 圆角 */
    }
  }

  .LikeComment {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    color: #a8a8a8;

    .like {
      padding-right: 20px;
      border-right: 1px solid #ccc;

      img {
        width: 15px;
        height: 15px;
      }
    }

    .comment {
      padding-left: 20px;
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
      }

      p {
        margin-left: 3px;
      }
    }
  }

  .commentMain {
    margin-top: 20px;

    .comSend {
      display: flex;

      .comment_input {
        padding-left: 10px;
        width: 600px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #f4f4f4;
        border-right: none;
        color: #757575;
      }

      input:focus {
        outline: none;
        /* 移除聚焦时的轮廓线 */
        border: none;
        /* 移除边框，但注意这可能会影响到元素的布局和外观 */
        /* 或者，如果你只想移除轮廓线但保留边框，可以只设置 outline: none; */
        /* border-color: transparent; 也是一个选项，如果你想要保留边框的宽度和样式但不想看到颜色 */
        border: 1px solid #f4f4f4;
        border-right: none;
        color: #757575;
      }

      .demo-rate-block {
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        display: inline-block;
        width: 109px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        border: 1px solid #f4f4f4;
        border-left: none;
        border-right: 1px solid #f4f4f4;

        .el-rate {
          --el-rate-icon-margin: 0px;
        }
      }

      .demo-rate-block .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
    }

    .comTop {
      margin-top: 20px;
      padding-left: 10px;
      width: 705px;
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      border: 1px solid #f0f0f0;
      font-weight: bold;
    }

    .list {
      .item {
        padding: 20px;
        width: 705px;
        border: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .item_left {
          .item_com {
            color: #676767;
            font-size: 13px;
          }

          .demo-rate-block {
            text-align: center;
            display: inline-block;
            box-sizing: border-box;
          }

          .demo-rate-block:last-child {
            border-right: none;
          }

          .demo-rate-block .demonstration {
            display: block;
            color: var(--el-text-color-secondary);
            font-size: 14px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.active {
  color: #10cb7e;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border-bottom: 1px dashed #ccc;
}

.itemActive {
  text-align: center;
  line-height: 30px;
  border-bottom: 1px dashed #ccc;
}

.itemActive:last-child {
  border-bottom: none;
}

.active:last-child {
  border-bottom: none;
}
</style>
